<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="60%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div class="topHeader">
                    <div></div>
                    <div>
                        <div class="title">{{detail.factory_apply_name}}</div>
                        <div class="type">发织合同</div>
                    </div>
                    <div>No.:{{detail.contract_no}}</div>
                </div>
                <div class="name">本公司(甲方)兹委托 : <span class="underline">{{detail.apply_name}}</span> (乙方)加工以下产品,经双方友好协商达成以下合同事项:</div>
                <div class="contont">
                    <div class="hreder">
                        <div class="top">
                            <div class="detail">
                                <div class="detailName">客户 : {{detail.custom_name}}</div>
                                <!-- <div class="detailName">款式描述 : 款式154515</div> -->
                                <div class="detailName">生产工序 : {{detail.two_process_title}}</div>
                                <div class="detailName">备注 : {{detail.remark}}</div>
                            </div>
                            <div class="detail">
                                <div class="detailName">批号 : {{detail.batch_number}}</div>
                                <div class="detailName">单价 : {{detail.price}} {{detail.unit_name}}</div>
                            </div>
                            <div class="detail">
                                <!-- <div class="detailName">款号 : {{detail.style_title}}</div> -->
                                <div class="detailName">针种 : {{detail.needle_seed}}</div>
                                <div class="detailName">发制日期 : {{detail.contract_date}}</div>
                            </div>
                            <div class="detail">
                                <!-- <div class="detailName">客户号 : -</div> -->
                                <!-- <div class="detailName">毛料损耗 :- </div> -->
                                <div class="detailName">完成日期 : {{detail.due_date}}</div>
                                <div class="detailName">预计每日完成数量为 : {{detail.every_day_num}}件</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;margin-top:50px">
                    <div class='custom-table'> <!-- {{order_detail}} -->
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                            <div class='w-40 left sizeTable' style="width:5%;"><span>序号</span></div>
                            <div class='w-40 left sizeTable' style="width:10%;"><span>色号</span></div>{{goods}}
                            <div class='w-40 left sizeTable posi' style="width:240px;">
                                <span class="xian1"></span>
                                <span class="xian2"></span>
                                <span class="xian3"></span>
                                <span class="title1">尺码</span><br><span class="title2">KG/件</span><br><span class="title3">数量</span><br><span
                                    class="title4">色组</span></div>
                            <div class='w-40 left' style="width:50%;">
                                <div style="width:100%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                    <div class='w-40 left sizeTable' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.orderDetail" :key="index"><span>{{item.goods_size}}</span></div>
                                </div>
                                <div style="width:100%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                    <div class='w-40 left sizeTable' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.orderDetail" :key="index"><span>{{item.weight}}</span></div>
                                </div>
                            </div>
                            <div class='w-40 left sizeTable' style="width:10%;"><span>小计(件)</span></div>
                            <div class='w-40 left sizeTable' style="width:10%;"><span>备注</span></div>
                        </div>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;border-bottom: 1px solid #000000;'>
                            <div class='w-40 left sizeTabSon' style="width:5%;"><span>1</span></div>
                            <div class='w-40 left sizeTabSon' style="width:10%;"><span></span>{{detail.goods.color_number}}</div>
                            <div class='w-40 left sizeTabSon' style="width:240px;"><span></span>{{detail.goods.colour}}</div>
                            <div class='w-40 left' style="width:50%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.orderDetail" :key="index"><span>{{item.weaving_num}}</span></div>
                            </div>
                            <div class='w-40 left sizeTabSon' style="width:10%;"><span>{{detail.total_count}}</span></div>
                            <div class='w-40 left sizeTabSon' style="width:10%;"><span>{{detail.orderDetail[0].remark}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="material">毛料预算表</div>
                <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;margin-top:50px">
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                            <div class='w-40 left' style="width:100%;">{{material_data}}
                                <div style="width:100%;display: flex;align-items: center;justify-content: space-between">
                                    <div class='w-40 left sizeTable' style="width:40%"><span>毛种</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>颜色</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>色号</span></div>
                                    <div class='w-40 left sizeTable' style="width:16%"><span>缸号</span></div>
                                    <div class='w-40 left sizeTable' style="width:16%"><span>损耗(%)</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>应发</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>实发</span></div>
                                </div>
                                <div style="width:100%;display: flex;align-items: center;justify-content: space-between" v-for="(item,index) in detail.material_data" :key="index">
                                    <div class='w-40 left sizeTable' style="width:40%"><span>{{item.material_name}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>{{item.materialSpec.colour}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>{{item.materialSpec.color_number}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:16%"><span>{{item.batch_number}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:16%"><span>{{item.loss_ratio}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>{{item.total_weight}}</span></div>
                                    <div class='w-40 left sizeTable' style="width:11%"><span>{{item.income_num}}</span></div>
                                </div>
                            </div>
                        </div>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;border-bottom: 1px solid #000000;'>
                            <div style="width:100%;display: flex;align-items: center;justify-content: space-between;border-right: 1px solid #000000;">
                                <div class='w-40 left sizeTabSon' style="width:40%;"><span>合计 : {{detail.lbs_weight}}</span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:16%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:16%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none;border-left: 1px solid #000000;border-right: 1px solid #000000;"><span>{{detail.total_weight}}</span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none;"><span>{{detail.actual_weight}}</span></div>
                            </div>
                            <!-- <div class='w-40 left sizeTabSon' style="width:40%;"><span>合计 : {{detail.lbs_weight}} LBS/打</span></div> -->
                            <!-- <div class='w-40 left sizeTabSon' style="width:40%;"><span>合计 : {{detail.lbs_weight}}</span></div> -->
                            <!-- <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                <div class='w-40 left sizeTable' style="width:40%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:16%;border:none"><span></span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span>{{detail.total_weight}}</span></div>
                                <div class='w-40 left sizeTable' style="width:11%;border:none"><span>{{detail.actual_weight}}</span></div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="material">合同条款</div>
                <div v-html="detail.clause_info.content"></div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                // this.detail.image = data.goods_image
                this.detail = data[0]
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
.printMain{
    margin: 0 30px;
}
div{
    color: #000;
}
.topHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .title{
        text-align: center;
        font-size: 30px;
        color: #000;
        margin-bottom: 10px;
    }
    .type{
        text-align: center;
        font-size: 22px;
    }
}
.name{
    margin-left: 10px;
        display: flex;
        align-items: end;
    .underline {
        border-bottom: 1px solid #747474; /* 设置下划线 */
        display: inline-block; /* 使元素像文本一样支持宽度和高度 */
        line-height: 32px; /* 设置行高，确保和签名区域的高度匹配 */
        margin-top: 10px; /* 设置与上文的间距 */
        width: 150px;
        text-align: center;
    }
}
.contont{
    display: flex;
    margin-top: 10px;
    .hreder{
        margin-left: 10px;
        width: 100%;
        .top{
            height: 80%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .detail{
                height: 100%;
                line-height: 32px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
        .comment{
            margin-bottom: 20px;
            display: inline-block;
        }
    }
}
.material{
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
}
.sizeTable{
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
.posi{
    position: relative;
    .xian1{
        position: absolute;
        width: 1px;
        height: 221px;
        top: -94px;
        left: 108px;
        background-color: #000;
        display: block;
        transform: rotate(-81deg);
    }
    .xian2{
        position: absolute;
        width: 1px;
        height: 202px;
        top: -68px;
        left: 94px;
        background-color: #000;
        display: block;
        transform: rotate(-71deg);
    }
    .xian3{
        position: absolute;
        width: 1px;
        height: 92px;
        top: -14px;
        left: 31px;
        background-color: #000;
        display: block;
        transform: rotate(-44deg);
    }
    .title1{
        position: absolute;
        top: 0px;
        right: 15px;
    }
    .title2{
        position: absolute;
        bottom: 10px;
        right: 25px;
    }
    .title3{
        position: absolute;
        bottom: 0;
        left: 70px;
    }
    .title4{
        position: absolute;
        bottom: 0;
        left: 10px;
    }
}
.sonClass{
    text-align:center;
    border-right: 1px solid #000000;
    width:100%;
}
.sizeTabSon{
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000000;
}
.custom-th{
    position: relative;
}
span{
    height: 32px;
}
</style>
